<template>
  <div class="home-content">
    <div class="home-top">
      <div class="home-top-left">
        {{webName}}
      </div>
      <div class="home-top-center">
      </div>
      <div class="home-top-right">
        <el-dropdown>
          <div style="color: white;margin-top: 20px">{{userName}}</div>
          <template #dropdown>
            <el-dropdown-menu class="transparent-bg">
              <el-dropdown-item @click="handleLoginOut">
                <el-icon><Delete></Delete></el-icon>退出
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div style="clear: both"></div>
    </div>
    <div class="home-bottom">
      <div class="home-bottom-left">
        <Menu/>
      </div>
      <div class="home-bottom-right">
        <RouterView :key="$route.fullPath"/>
      </div>
    </div>
  </div>
</template>

<script setup>
import {RouterView} from 'vue-router'
import Menu from '@/components/Menu.vue'
import {router} from "../router/index.ts";
import {Delete} from "@element-plus/icons-vue";
import {inject, onMounted, onUnmounted, ref} from "vue";
import {LOGIN_USER_NAME, AXIOS_NAME, TOKEN_NAME_KEY, TOKEN_VALUE_KEY} from "@/constant/constant.js";
import {ElMessage} from "element-plus";
import useWebSocket from "@/components/plugs/socket/WebSocket.js"

let tokenValue = localStorage.getItem(TOKEN_VALUE_KEY);
const { socket } = useWebSocket('ws://localhost:8088/websocket/' + tokenValue);

// 接收消息的方法
const handleMessage = (event) => {
  console.log('接收到消息：', event.data);
  const messageData = JSON.parse(event.data);
  if (messageData.state == 1) {
      ElMessage.info(messageData.reason);
      return;
  }
  ElMessage.error(messageData.reason);
};
// 发送消息的方法
const sendMessage = (event) => {
  const message = {
    sendId: '',
    content: ''
  }
  socket.value.send(
      JSON.stringify(message)
  );
};

onMounted(() => {
  router.replace("/system/firstPage");
  if (socket.value) {
    socket.value.addEventListener('message', handleMessage);
  } else {
    console.error('WebSocket not initialized');
  }
});

onUnmounted(() => {
  if (socket.value) {
    socket.value.removeEventListener('message', handleMessage);
  }
});

const webName = import.meta.env.VITE_WEB_NAME;
const $axiso = inject(AXIOS_NAME);
const userName = ref(localStorage.getItem(LOGIN_USER_NAME));

const handleLoginOut = () =>{
  $axiso.post('/login/out',{}).then(response => {
    const data = response.data;
    if(data.code == 1){
      localStorage.removeItem(TOKEN_NAME_KEY);
      localStorage.removeItem(TOKEN_VALUE_KEY);
      localStorage.removeItem(LOGIN_USER_NAME);
      router.replace("/login");
      return;
    }
    ElMessage.error("退出登陆失败!");
  },error => {
    ElMessage.error("退出登陆失败!");
  });
}
</script>

<style>
.home-top-left {
  padding-left: 20px;
  width: auto;
  float: left;
  text-align: center;
  line-height: 60px;
  color: white;
  font-size: 30px;
}

.home-top-center {
  flex-grow: 1;        /* 不定长内容自适应 */
  flex-shrink: 1;      /* 可收缩 */
  flex-basis: 0;       /* 初始大小 */
}

.home-top-right {
  width: 80px;
  flex: 0 0 auto;
}

.home-content {
  width: 100%;
  height: 100vh;
  background-color: white;
  overflow: hidden;
  flex-grow: 1;        /* 填充剩余宽度 */
}

.home-top {
  width: 100%;
  height: 60px;
  display: flex;
  background-color: #055386;
}

.home-bottom {
  width: 100%;
  height: calc(100% - 60px);
  display: flex;
}

.home-bottom-left {
  width: 200px;
  height: 100%;
  background-color: #04426B;
}

.home-bottom-right {
  width: calc(100% - 200px);
  background-color: white;
  padding: 5px;
}

</style>